import React from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  ImageBackground,
  Image,
} from 'react-native';
import {List, WhiteSpace, Flex} from '@ant-design/react-native';
import {IconX} from '@/rcomponents/iconx';
import UserStore from '@/stores/userStore';
import SettingScreen from './setting';
import colors from '@/Themes/Colors';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    //  backgroundColor: '#f5f5f9',
  },
  userimgbg: {
    width: '100%',
    height: 150,
    justifyContent: 'center',
  },
  avatarView: {
    position: 'absolute',
    left: 40,
  },
  username: {
    flexDirection: 'column',
    marginLeft: 5,
    color: 'white',
  },
  usertext: {
    fontSize: 26,
    color: 'white',
  },
  userlogintext: {
    color: 'white',
    borderTopColor: 'grey',
    borderTopWidth: 1,
  },
  marginR10: {
    marginRight: 10,
  },
});

const ProfileScreen = ({navigation}) => {
  const userStore = UserStore.useStore();
  const {user} = userStore;
  return (
    <ScrollView
      automticallyAdjustContentInsets={false}
      showsHorizontalSrollIndicato={false}
      showsVerticalScrollIndicator={false}>
      <ImageBackground
        source={require('@/assets/images/userbg.png')}
        style={styles.userimgbg}>
        <Flex style={styles.avatarView}>
          <Image source={require('@/assets/images/avatar.png')} />
          <View style={styles.username}>
            <Text style={styles.usertext}>{user.Name}</Text>
            {!!user.Department && <Text>{user.Department}</Text>}
          </View>
        </Flex>
      </ImageBackground>
      <WhiteSpace />
      <List>
        <List.Item
          onPress={() => {
            navigation.navigate(SettingScreen.routeName);
          }}
          thumb={
            <IconX
              origin="ant"
              name="setting"
              color={colors.blue300}
              style={styles.marginR10}
            />
          }
          arrow="horizontal">
          设置
        </List.Item>
      </List>
    </ScrollView>
  );
};

ProfileScreen.routeName = 'ProfileScreen';
export default ProfileScreen;
